<template>
  <div id="Profit">
    <el-row>
      <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
        <el-date-picker v-model="date" type="month" placeholder="选择月" value-format="yyyy-MM" :time-arrow-control="true" @change="changeDate">
        </el-date-picker>
      </el-col>
      <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
        <div class="grid-content bg-purple">
          <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        </div>
      </el-col>
      <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
        <div class="grid-content bg-purple">
          <el-button type="danger" plain @click="reset">重置</el-button>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :xs="20" :sm="20" :md="20" :lg="20" :xl="20" :offset="2">
        <el-table :data="list" style="width: 100%">
          <el-table-column label="支出" prop="cost">
          </el-table-column>
          <el-table-column label="收入" prop="input">
          </el-table-column>
          <el-table-column label="利润" prop="profit">
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
        <el-button icon="el-icon-back" circle @click="preMonth"></el-button>
      </el-col>
      <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16">
        <el-tag type="info">当前展示的月份为:{{showdate}}</el-tag>
      </el-col>
      <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
        <el-button icon="el-icon-right" circle @click="nextMonth"></el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
import * as url from '../../../api/ygrapi.js'
export default {
  name: 'Profit.vue',
  components: {},
  data() {
    return {
      date: '',
      showdate: '',
      tabledata: [{
        profit: 0,
        input: 0,
        cost: 0
      }]
    }
  },
  methods: {
    reset() { //重置（重新获取请求数据列表）
      this.date = this.showdate
    },
    changeDate(value) {
      console.log(value)
    },
    search() {
      if (this.date) {
        this.getProList(this.date)
        this.showdate = this.date
      } else {
        this.$message({
          type: 'danger',
          message: '请选择月份！'
        })
      }
    },
    preMonth() { //上个月
      this.changeMonth(-1);
      this.getProList(this.date)
    },
    nextMonth() { //下个月
      this.change = "next";
      this.changeMonth(1);
      this.getProList(this.date)
    },
    getProList(time) { //请求月份的数据列表
      console.log(time)
      this.$axios({
        method: 'post',
        url: url.findProfit,
        data: { time: time }
      }).then(res => {
        console.log(res)
        this.tabledata[0].cost = res.data.dataList[0].cost
        this.tabledata[0].profit = res.data.dataList[0].profit
        this.tabledata[0].input = res.data.dataList[0].input
      }).catch(err => {
        console.log(err)
      })
    },
    formatDate(time) { //日期格式化字符串
      var year = time.getFullYear();
      var month = time.getMonth() + 1;
      month = (month < 10 ? "0" + month : month);
      return (year.toString() + '-' + month.toString());
    },
    changeMonth(count) { //日期字符串加减月份
      let time = new Date(this.date)
      time.setMonth(time.getMonth() + count, 15);
      time = this.formatDate(time)
      this.date = time
      this.showdate = time
    }
  },
  computed: {
    list() {
      return this.tabledata
    },
  },
  created() {
    let now = new Date()
    this.date = this.formatDate(now)
    this.showdate = this.formatDate(now)
    this.getProList(this.date)
    console.log('利润管理创建')
  },
  destroyed() {
    console.log('利润管理销毁')
  },
}

</script>
<style lang="less" scoped>
#Profit {
  .el-row {
    margin-top: 10px;

    .el-table {
      margin-top: 10px;
    }
  }
}

</style>


